<template>
  <div>
    <!-- 返回按钮 -->
    <el-button type="primary" @click="goBack" style="position: absolute; top: 10px; right: 10px;">返回</el-button>

    <!-- 第一张图的内容 -->
    <el-card class="coupon-details">
      <h2>优惠券详情</h2>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-card>
            <div>优惠券名称: {{ coupons.name }}</div>
            <div>面值: {{ coupons.value }}元</div>
            <div>优惠券类型: {{ coupons.type }}</div>
            <div>状态: {{ coupons.status }}</div>
            <div>发行量: {{ coupons.quantity }}</div>
            <div>使用量: {{ coupons.couponUsage }}</div>
            <div>有效期开始: {{ coupons.startDate }}</div>
            <div>有效期结束: {{ coupons.endDate }}</div>
          </el-card>
        </el-col>
      </el-row>
    </el-card>

    <!-- 第二张图的内容 -->
    <el-card class="coupon-claims">
      <h2>优惠券领取信息</h2>
      <el-table :data="claims" style="width: 100%">
        <el-table-column prop="couponId" label="优惠券编号" width="180"></el-table-column>
        <el-table-column prop="userName" label="用户名" width="180"></el-table-column>
        <el-table-column prop="phone" label="手机号" width="180"></el-table-column>
        <el-table-column prop="receiveTime" label="领取时间" width="180"></el-table-column>
        <el-table-column prop="useStatus" label="使用状态" width="180"></el-table-column>
        <el-table-column prop="useTime" label="使用时间" width="180"></el-table-column>
        <el-table-column prop="orderId" label="订单编号" width="180"></el-table-column>
      </el-table>
      <div>
        <el-pagination
            v-model:current-page="pageNum"
            v-model:page-size="pageSize"
            :page-sizes="[2, 3, 4, 5]"
            :small="small"
            :disabled="disabled"
            :background="background"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"></el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import {onMounted, ref} from 'vue';
import {useRoute, useRouter} from 'vue-router';
import {ElMessage} from 'element-plus';
import axios from "axios";

const router = useRouter();
const route = useRoute();
const coupons = ref([]);

const statistics = ref({});
const getCoupons = () => {

  axios.get(`/coupons/getcoupon/${route.params.id}`).then(res => {
    coupons.value = res.data;
  })
}
const claims = ref([]);
// 分页模型定义=============================================================
let pageNum = ref(1);
let pageSize = ref(3);
let total = ref(1);
const small = ref(false);
const background = ref(true);
const disabled = ref(false);

const handleSizeChange = (val) => {
  pageSize.value = val;
  getclaims()
}
const handleCurrentChange = (val) => {
  // 将这个val数字赋值给 pageNum
  pageNum.value = val;
  getclaims()
}
const getclaims = () => {
  axios.get(`/coupons/getclaims/${pageNum.value}/${pageSize.value}`).then(res => {
    claims.value = res.data.obj.data;
    total.value = res.data.obj.total;
  })
}
onMounted(() => {
  getclaims();
  getCoupons()
})
const goBack = () => {
  router.push({name: 'CouponList'});
};
</script>

<style scoped>
.coupon-details, .coupon-claims {
  margin-top: 20px;
}

h2 {
  margin-bottom: 10px;
}

el-card {
  margin-bottom: 20px;
}
</style>